<template>
  <view class="security-container">
    <uni-list>
      <!-- 修改密码 -->
      <uni-list-item 
        title="修改密码" 
        @click="changePassword"
        showArrow
      >
        <template #header>
          <text class=" " style="font-size: 20rpx;"></text>
        </template>
      </uni-list-item>

      <!-- 手机号绑定 -->
      <uni-list-item 
        title="手机号绑定" 
        :rightText="userInfo.phone || '未绑定'"
        @click="bindPhone"
        showArrow
      >
        <template #header>
          <text class="bi bi-phone"></text>
        </template>
      </uni-list-item>

      <!-- 邮箱绑定 -->
      <uni-list-item 
        title="邮箱绑定" 
        :rightText="userInfo.email || '未绑定'"
        @click="bindEmail"
        showArrow
      >
        <template #header>
          <text class="bi bi-envelope"></text>
        </template>
      </uni-list-item>
    </uni-list>

    <!-- 修改密码弹窗 -->
    <uni-popup ref="passwordPopup" type="center">
      <view class="popup-content">
        <view class="popup-title">修改密码</view>
        <uni-forms :modelValue="passwordForm" :rules="rules">
          <uni-forms-item name="oldPassword">
            <uni-easyinput
              v-model="passwordForm.oldPassword"
              type="password"
              placeholder="请输入原密码"
            />
          </uni-forms-item>
          <uni-forms-item name="newPassword">
            <uni-easyinput
              v-model="passwordForm.newPassword"
              type="password"
              placeholder="请输入新密码"
            />
          </uni-forms-item>
          <uni-forms-item name="confirmPassword">
            <uni-easyinput
              v-model="passwordForm.confirmPassword"
              type="password"
              placeholder="请确认新密码"
            />
          </uni-forms-item>
        </uni-forms>
        <view class="popup-buttons">
          <button class="cancel-btn" @tap="closePasswordPopup">取消</button>
          <button class="confirm-btn" @tap="submitPassword">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useUserStore } from '@/stores/userStore';

const userStore = useUserStore();
const userInfo = ref(userStore.userInfo);
const passwordPopup = ref(null);

const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

const rules = {
  oldPassword: {
    rules: [{
      required: true,
      errorMessage: '请输入原密码'
    }]
  },
  newPassword: {
    rules: [{
      required: true,
      errorMessage: '请输入新密码'
    }, {
      minLength: 6,
      errorMessage: '密码长度不能小于6位'
    }]
  },
  confirmPassword: {
    rules: [{
      required: true,
      errorMessage: '请确认新密码'
    }, {
      validateFunction: function(rule, value, data) {
        return value === data.newPassword;
      },
      errorMessage: '两次输入的密码不一致'
    }]
  }
};

const changePassword = () => {
  passwordPopup.value.open();
};

const closePasswordPopup = () => {
  passwordPopup.value.close();
  passwordForm.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  };
};

const submitPassword = async () => {
  try {
    await uni.showLoading({ title: '提交中...' });
    // 实现修改密码逻辑
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    uni.showToast({
      title: '修改成功',
      icon: 'success'
    });
    closePasswordPopup();
  } catch (error) {
    uni.showToast({
      title: '修改失败',
      icon: 'error'
    });
  } finally {
    uni.hideLoading();
  }
};

const bindPhone = () => {
  uni.navigateTo({
    url: '/pages/my/bind-phone'
  });
};

const bindEmail = () => {
  uni.navigateTo({
    url: '/pages/my/bind-email'
  });
};
</script>

<style lang="scss" scoped>
.security-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 20rpx 0;
}

.bi {
  font-size: 40rpx;
  margin-right: 20rpx;
  color: var(--td-brand-color);
}

.popup-content {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  width: 600rpx;
  
  .popup-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }
  
  .popup-buttons {
    display: flex;
    gap: 20rpx;
    margin-top: 40rpx;
    
    button {
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      border: none;
      
      &.cancel-btn {
        background: #f5f5f5;
        color: #666;
      }
      
      &.confirm-btn {
        background: var(--td-brand-color);
        color: #fff;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style> 